// Colors
// $slates: '#f8fafc','#f1f5f9','#e2e8f0','#cbd5e1','#94a3b8','#64748b','#475569','#334155','#1e293b','#0f172a','#020617';
// $grays: '#f9fafb','#f3f4f6','#e5e7eb','#d1d5db','#9ca3af','#6b7280','#4b5563','#374151','#1f2937','#111827','#030712';
// $zincs: '#fafafa','#f4f4f5','#e4e4e7','#d4d4d8','#a1a1aa','#71717a','#52525b','#3f3f46','#27272a','#18181b','#09090b';
// $neutrals: '#fafafa','#f5f5f5','#e5e5e5','#d4d4d4','#a3a3a3','#737373','#525252','#404040','#262626','#171717','#0a0a0a';
// $stones: '#fafaf9','#f5f5f4','#e7e5e4','#d6d3d1','#a8a29e','#78716c','#57534e','#44403c','#292524','#1c1917','#0c0a09';
// $reds: '#fef2f2','#fee2e2','#fecaca','#fca5a5','#f87171','#ef4444','#dc2626','#b91c1c','#991b1b','#7f1d1d','#450a0a';
// $oranges: '#fff7ed','#ffedd5','#fed7aa','#fdba74','#fb923c','#f97316','#ea580c','#c2410c','#9a3412','#7c2d12','#431407';
// $ambers: '#fffbeb','#fef3c7','#fde68a','#fcd34d','#fbbf24','#f59e0b','#d97706','#b45309','#92400e','#78350f','#451a03';
// $yellows: '#fefce8','#fef9c3','#fef08a','#fde047','#facc15','#eab308','#ca8a04','#a16207','#854d0e','#713f12','#422006';
// $limes: '#f7fee7','#ecfccb','#d9f99d','#bef264','#a3e635','#84cc16','#65a30d','#4d7c0f','#3f6212','#365314','#1a2e05';
// $greens: '#f0fdf4','#dcfce7','#bbf7d0','#86efac','#4ade80','#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16';
// $emeralds: '#ecfdf5','#d1fae5','#a7f3d0','#6ee7b7','#34d399','#10b981','#059669','#047857','#065f46','#064e3b','#022c22';
// $teals: '#f0fdfa','#ccfbf1','#99f6e4','#5eead4','#2dd4bf','#14b8a6','#0d9488','#0f766e','#115e59','#134e4a','#042f2e';
// $cyans: '#ecfeff','#cffafe','#a5f3fc','#67e8f9','#22d3ee','#06b6d4','#0891b2','#0e7490','#155e75','#164e63','#083344';
// $skys: '#f0f9ff','#e0f2fe','#bae6fd','#7dd3fc','#38bdf8','#0ea5e9','#0284c7','#0369a1','#075985','#0c4a6e','#082f49';
// $blues: '#eff6ff','#dbeafe','#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1d4ed8','#1e40af','#1e3a8a','#172554';
// $indigos: '#eef2ff','#e0e7ff','#c7d2fe','#a5b4fc','#818cf8','#6366f1','#4f46e5','#4338ca','#3730a3','#312e81','#1e1b4b';
// $violets: '#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95','#2e1065';
// $purples: '#faf5ff','#f3e8ff','#e9d5ff','#d8b4fe','#c084fc','#a855f7','#9333ea','#7e22ce','#6b21a8','#581c87','#3b0764';
// $fuchsias: '#fdf4ff','#fae8ff','#f5d0fe','#f0abfc','#e879f9','#d946ef','#c026d3','#a21caf','#86198f','#701a75','#4a044e';
// $pinks: '#fdf2f8','#fce7f3','#fbcfe8','#f9a8d4','#f472b6','#ec4899','#db2777','#be185d','#9d174d','#831843','#500724';
// $roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';

// $colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);

// $colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;




// Gradient Color Stops
@each $i in $colorIndexes {
	@each $name, $colors in $colorNames {
		$colorName: --color-#{$name}-#{$i};
		
		[class*='from-#{$name}-#{$i}'] {
			--gradient-from-position: 0%;
			--gradient-from: rgb(var(#{$colorName}) / var(--from-opacity)) var(--gradient-from-position);
			
			--gradient-to-position: 100%;
			--gradient-to: rgba(0,0,0,0) var(--gradient-to-position);
			
			--gradient-stops: var(--gradient-from), var(--gradient-to);
		}
		
		// @include setOpacity(from-#{$name}-#{$i}, --from-opacity);
	}
}

@each $i in $colorIndexes {
	@each $name, $colors in $colorNames {
		$colorName: --color-#{$name}-#{$i};
		
		[class*='to-#{$name}-#{$i}'] {
			--gradient-to: rgb(var(#{$colorName}) / var(--to-opacity)) var(--gradient-to-position);
		}
		
		// @include setOpacity(to-#{$name}-#{$i}, --to-opacity);
	}
}

@for $i from 1 to 10 {
	.from-0-#{$i} {
		--gradient-from-position: calc(#{$i} * 10 * 1%);
	}
}
@for $i from 1 to 10 {
	.to-0-#{$i} {
		--gradient-to-position: calc(#{$i} * 10 * 1%);
	}
}


// 

@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' black, 'white' white{
	.from-#{$name} {
		--gradient-from-position: 0%;
		--gradient-from: #{$val} var(--gradient-from-position);
		
		--gradient-to-position: 100%;
		--gradient-to: #{$val}  var(--gradient-from-position);
		
		--gradient-stops: var(--gradient-from), var(--gradient-to);
	}
}

@each $name, $val in inherit inherit, current currentColor, 'transparent' transparent, 'black' black, 'white' white{
	.to-#{$name} {
		--gradient-to: #{$val} var(--gradient-to-position);
	}
}